<template>
  <div class="box">
    <div class="loginBox">
      <h1>注册账号</h1>
      <h2>虾米严选商城欢迎你</h2>
      <inputComps
        @blur="phonebtn"
        :class="reg == 0 ? '' : reg == 1 ? 'active' : 'active1'"
        typeS="text"
        v-model="phone"
        place="手机号码"
      >
        <u>
          <b v-if="reg == 2">
            必填
          </b>
          <van-icon name="phone-o" />
        </u>
      </inputComps>
      <inputComps
        @blur="passwordBlur"
        :typeS="pas"
        v-model="password"
        place="密码"
        :class="
          passwordFlag == 0 ? '' : passwordFlag == 1 ? 'active' : 'active1'
        "
      >
        <u>
          <van-icon @click="showPassword" :name="eye" />
        </u>
      </inputComps>

      <inputComps
        :typeS="pas"
        v-model="password"
        place="密码"
        :class="
          passwordFlag == 0 ? '' : passwordFlag == 1 ? 'active' : 'active1'
        "
      >
        <u>
          <van-icon @click="showPassword" :name="eye" />
        </u>
      </inputComps>

      <inputComps
        :typeS="pas"
        v-model="password"
        place="密码"
        :class="
          passwordFlag == 0 ? '' : passwordFlag == 1 ? 'active' : 'active1'
        "
      >
        <u>
          <van-icon name="manager" />
        </u>
      </inputComps>

      <div class="iphoneCode">
        <input type="text" />
        <img
          @click="imgTapCode"
          :src="
            'https://api.it120.cc/small4/verification/pic/get?key=' + Gettime
          "
          alt=""
        />
      </div>
      <div class="city" @click="citySelection">{{ cityCounty }}</div>
      <button>注册</button>
      <p>忘记密码</p>
      <p>
        <router-link to="login"> 您已有账号？立即登录</router-link>
      </p>
      <!-- 地区弹框 -->
    </div>

    <van-popup
      v-model:show="loading"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-picker
        :columns-field-names="{ text: 'name' }"
        @cancel="loading = false"
        title="标题"
        :columns="columns"
        @change="changeCity"
        @confirm="cityBtnoK"
      />
    </van-popup>
  </div>
</template>

<script>
import inputComps from "../login/inputComps.vue";
import { ref } from "vue";
import { useLogin, phoneCode } from "@/api";
import { city, county } from "@/api/user.js";
export default {
  setup(props) {
    let phone = ref("");
    let password = ref("");
    // 手机号和密码数据
    let pas = ref("password");
    let eye = ref("closed-eye");
    // 类型切换和小眼睛

    let off = ref(false);
    let reg = ref(0); // 正则手机号
    let passwordFlag = ref(0); // 正则密码
    let time = new Date().getTime(); // 毫秒数
    let cityCounty = ref(""); // 选中城市和县城的数据
    // 登录验证
    const Gettime = ref(time);
    //  城市地区的数据
    const columns = ref([
      // 第一列
      {
        values: [],
        defaultIndex: 2,
      },
      // 第二列
      {
        values: [],
        defaultIndex: 1,
      },
    ]);
    // 城市切换的状态
    let loading = ref(false);
    // 登录的按钮
    city().then((res) => {
      columns.value[0].values = res;
      console.log(res);
      county(res[0].id).then((res) => {
        columns.value[1].values = res;
      });
    });

    function loginBtn() {
      console.log(phone.value, password.value);
      useLogin(phone.value, password.value).then((res) => {
        console.log(res);
      });
    }

    // x选择城市弹框
    function citySelection() {
      console.log(1);
      loading.value = true;
    }

    // 城市的选择逻辑
    let cityLoc = "";
    function changeCity(res) {
      cityLoc = res[0].name + " - " + res[1].name;
      console.log(res);
      county(res[0].id).then((res) => {
        columns.value[1].values = res;
      });
      console.log(cityCounty.value);
    }

    // 城市的确定按钮
    function cityBtnoK() {
      cityCounty.value = cityLoc;
      loading.value = false;
    }
    phoneCode().then((res) => {});
    // 是否看见密码
    function showPassword() {
      if (eye.value == "eye-o" && pas.value == "text") {
        eye.value = "closed-eye";
        pas.value = "password";
      } else {
        eye.value = "eye-o";
        pas.value = "text";
      }
    }
    //手机正则
    function phonebtn() {
      const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (phoneReg.test(phone.value)) {
        reg.value = 1;
      } else {
        reg.value = 2;
      }
      console.log(reg.value);
    }

    // 密码正则
    function passwordBlur() {
      const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/;
      if (passwordReg.test(password.value)) {
        passwordFlag.value = 1;
      } else {
        passwordFlag.value = 2;
      }
      console.log(passwordFlag.value);
    }
    // 验证码图片切换
    function imgTapCode() {
      Gettime.value = new Date().getTime();
    }

    return {
      imgTapCode,
      loginBtn,
      password,
      phone,
      off,
      pas,
      eye,
      showPassword,
      phonebtn,
      reg,
      passwordBlur,
      passwordFlag,
      Gettime,
      citySelection,
      columns,
      loading,
      changeCity,
      cityBtnoK,
      cityCounty,
    };
  },
  components: { inputComps },
};
</script>

<style lang="scss" scoped>
.iphoneCode,
.city {
  font-size: 26px;
  padding-left: 8px;
  width: 100%;
  height: 90px;
  background-color: #f5f5f5;
  border-radius: 9px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 40px 0;
  input {
    background-color: transparent;
    padding-right: 60%;
  }
}
.iphoneCode {
  position: relative;
  img {
    width: 50%;
    height: 100%;
    float: right;
    position: absolute;
    right: 0;
  }
}
.box {
  padding: 60px;
  overflow: auto;
}
.iphone {
  width: 100%;
  height: 90px;
  border-radius: 16px;
  background-color: red;
}
.active {
  border: 0.01rem solid rgb(56, 219, 36);
  background: rgb(225, 255, 223);
}
.active1 {
  border: 0.01rem solid rgb(225, 44, 30);
  background: rgb(255, 233, 228);
}
.loginBox {
  border: 1px solid rgb(207, 205, 205);
  padding: 40px;
  p {
    font-size: 26px;
    margin: 50px 0;
    text-align: center;
    color: rgb(139, 138, 138);
    &:nth-of-type(2) {
      color: #549ff9;
    }
  }
  h2 {
    font-size: 26px;
    margin: 40px 0;
    color: rgb(124, 123, 123);
  }
  button {
    width: 5.2rem;
    height: 85px;
    display: block;
    margin: 20px auto;
    outline: none;
    color: #fff;
    text-transform: uppercase;
    background-image: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    box-shadow: 0 5px 3px #ccc;
    border: 0;
    font-size: 27px;
    text-align: center;
    border-radius: 10px;
  }
  input {
    margin: 20px 0;
    width: 100%;
    border-radius: 8px;
    outline: none;
    border: 0;
    height: 60px;
  }

  u {
    position: absolute;
    top: 35%;
    right: 30px;
    font-size: 28px;
  }
}
</style>
